import { defineComponent, markRaw } from 'vue'
import DataNode from '../../ItemNode/DataNode'
import {
  ElButton,
  ElColorPicker,
  ElInput,
  ElRadioButton,
  ElRadioGroup,
  ElSwitch,
  ElText
} from 'element-plus'
import classes from '../../ItemNode/ItemNode.module.css'
import PieChart from './PieChart.vue'
import PieChartRaw from './PieChart.vue?raw'
import pie3DOptionRaw from './pie3DOption.js?raw'
import { Minus, Plus } from '@element-plus/icons-vue'

export default class NPieChart extends DataNode {
  isNPieChart = true
  isChartNode = true

  constructor(node?: NPieChart) {
    super(node)

    if (!node) {
      this.path = './components/NPieChart/NPieChart.tsx'
      this.name = '饼图'

      const style = this.props.style
      this.props.style = {
        ...style,
        width: '300px',
        height: '200px',
        flexShrink: '0'
      }

      this.props.dataUrl = ''
      this.props.dataFn = `function () {
  return [
    {
      product: 'defaultA',
      default1: 2
    },
    {
      product: 'defaultB',
      default1: 5
    },
    {
      product: 'defaultC',
      default1: 4
    },
    {
      product: 'defaultD',
      default1: 6
    }
  ]
}
`

      this.props.autoAction = false

      this.props.option = {
        type: 'pie',
        color: [
          'hsla(320, 100%, 67%, 1)',
          'hsla(160, 100%, 67%, 1)',
          'hsla(80, 100%, 67%, 1)',
          'hsla(40, 100%, 67%, 1)'
        ],
        innerRadius: '0%',
        outerRadius: '75%',
        legendTextStyleColor: '#333',
        lableShow: false,
        labelColor: '#333',
        datasetDimensions: ['default1'],
        datasetSourceProduct: 'product'
      }
    }

    const pComponent = this.component
    this.component = markRaw(
      defineComponent(
        (props) => {
          return () => (
            <pComponent>
              <PieChart
                option={this.props.option}
                data={this.props.data ?? []}
                autoAction={this.props.autoAction}
              ></PieChart>
            </pComponent>
          )
        },
        {
          name: 'NPieChart'
        }
      )
    )

    const pView = this.view
    this.view = markRaw(
      defineComponent((props) => {
        this.props.data = [
          {
            product: 'defaultA',
            default1: 2
          },
          {
            product: 'defaultB',
            default1: 5
          },
          {
            product: 'defaultC',
            default1: 4
          },
          {
            product: 'defaultD',
            default1: 6
          }
        ]

        return () => (
          <pView>
            <this.component style={{ transform: 'scale(0.3, 0.3)' }}></this.component>
          </pView>
        )
      })
    )

    const pParams = this.params
    this.params = markRaw(
      defineComponent(() => {
        return () => (
          <pParams>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                饼图类型
              </ElText>
              <div class={classes['params-item-content']}>
                <ElRadioGroup
                  modelValue={this.props.option.type}
                  onUpdate:modelValue={(v) => (this.props.option.type = v)}
                  size="small"
                >
                  <ElRadioButton value="pie" label="普通" size="small"></ElRadioButton>
                  <ElRadioButton value="pie3D" label="3D" size="small"></ElRadioButton>
                </ElRadioGroup>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                名字段
              </ElText>
              <div class={classes['params-item-content']}>
                <ElInput
                  modelValue={this.props.option.datasetSourceProduct}
                  onUpdate:modelValue={(v) => (this.props.option.datasetSourceProduct = v || '')}
                  size="small"
                ></ElInput>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                值字段
              </ElText>
              <div class={classes['params-item-content']}>
                <ElInput
                  modelValue={this.props.option.datasetDimensions[0]}
                  onUpdate:modelValue={(v) => (this.props.option.datasetDimensions[0] = v || '')}
                  size="small"
                ></ElInput>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                内半径百分比
              </ElText>
              <div class={classes['params-item-content']}>
                <ElInput
                  modelValue={this.props.option.innerRadius}
                  onUpdate:modelValue={(v) => (this.props.option.innerRadius = v || '0%')}
                  size="small"
                ></ElInput>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                外半径百分比
              </ElText>
              <div class={classes['params-item-content']}>
                <ElInput
                  modelValue={this.props.option.outerRadius}
                  onUpdate:modelValue={(v) => (this.props.option.outerRadius = v || '75%')}
                  size="small"
                ></ElInput>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                图例字色
              </ElText>
              <div class={classes['params-item-content']}>
                <ElColorPicker
                  modelValue={this.props.option.legendTextStyleColor}
                  onUpdate:modelValue={(v) => (this.props.option.legendTextStyleColor = v || '')}
                  show-alpha
                  size="small"
                  teleported={false}
                ></ElColorPicker>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                显示标签
              </ElText>
              <div class={classes['params-item-content']}>
                <ElSwitch
                  modelValue={this.props.option.lableShow}
                  onUpdate:modelValue={(v) => (this.props.option.lableShow = v)}
                  size="small"
                ></ElSwitch>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                标签字色
              </ElText>
              <div class={classes['params-item-content']}>
                <ElColorPicker
                  modelValue={this.props.option.labelColor}
                  onUpdate:modelValue={(v) => (this.props.option.labelColor = v || '')}
                  show-alpha
                  size="small"
                  teleported={false}
                ></ElColorPicker>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                调色盘
              </ElText>
              <div class={classes['params-item-content']}>
                {this.props.option.color.map((c, index) => (
                  <ElColorPicker
                    modelValue={this.props.option.color[index]}
                    onUpdate:modelValue={(v) => (this.props.option.color[index] = v || '')}
                    color-format="hsl"
                    show-alpha
                    size="small"
                    teleported={false}
                  ></ElColorPicker>
                ))}
                <ElButton
                  type="primary"
                  icon={Plus}
                  circle
                  onClick={() => this.props.option.color.push('#5af')}
                  size="small"
                ></ElButton>
                <ElButton
                  type="danger"
                  icon={Minus}
                  circle
                  onClick={() => this.props.option.color.pop()}
                  size="small"
                ></ElButton>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                轮流选择
              </ElText>
              <div class={classes['params-item-content']}>
                <ElSwitch v-model={this.props.autoAction} size="small"></ElSwitch>
              </div>
            </div>
          </pParams>
        )
      })
    )
  }

  toVue(): SfcObj {
    const sfcObj = super.toVue()
    const name = sfcObj.name
    const dataVar = sfcObj.dataVar
    const [uuid0, uuid1] = this.uuid.split('-')
    const optionVar = `${name}_${uuid0}_option`

    const optionStr = JSON.stringify(this.props.option)

    sfcObj.imports = {
      ...sfcObj.imports,
      vue: {
        ...sfcObj.imports.vue,
        ref: 'ref'
      },
      ['./imports/PieChart.vue']: {
        default: 'PieChart'
      }
    }

    sfcObj.importFiles = {
      ...sfcObj.importFiles,
      'PieChart.vue': PieChartRaw,
      'pie3DOption.js': pie3DOptionRaw
    }

    sfcObj.script = `
${sfcObj.script}
const ${optionVar} = ref(${optionStr})
      `

    sfcObj.template = sfcObj.template.replace(
      '<slot></slot>',
      `
  <PieChart :option="${optionVar}" :data="${dataVar}" :autoAction="${this.props.autoAction}"></PieChart>
      `
    )

    return sfcObj
  }
}
